<template>
  <h3>Mouse: {{ x }} x {{ y }}</h3>
  <p>Counter: {{ count }}</p>
  <el-button type="primary" size="small" @click="inc()">+</el-button>
  <el-button type="primary" size="small" @click="dec()">-</el-button>
  <el-button type="primary" size="small" @click="inc(5)">+5</el-button>
  <el-button type="primary" size="small" @click="dec(5)">-5</el-button>
  <el-button type="primary" size="small" @click="set(100)">set100</el-button>
  <el-button type="primary" size="small" @click="reset()">reset</el-button>
</template>

<script setup>
import { useMouse, useCounter } from '@vueuse/core'
const { x, y } = useMouse()
const { count, inc, dec, set, reset } = useCounter(10)
</script>

<style lang="scss" scoped></style>
